<template>
    <div class="newBanner">
        <div class="image" v-if="img.type == 'string'" @click="jump">
            <PublicImage :src="img.url"></PublicImage>
            <!-- <img :src="img.url"> -->
        </div>
        <div class="imageList" v-else>
            <el-carousel style="width: 100%;height:100%" :autoplay="true">
                <el-carousel-item class="carouselItem" v-for="(item,index) in img.list" :key="index">
                    <!-- <img :src="item.url" alt=""> -->
                    <PublicImage :src="item.url"></PublicImage>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script>
import PublicImage from "./publicImage";

export default {
    components: { PublicImage },
    props:["image"],
    computed:{
        img(){
            let type = Object.prototype.toString.call(this.image)
            if(type == "[object String]"){
                // require(this.image)
                console.log("1154",this.image)
                return { url :this.image , type : "string"}
            } else {
                console.log("11554",this.image)
                return { list :this.image , type : "array"}
            }
        }
    },
    methods:{
        jump(){
            this.$emit("jump")
        }
    }
}
</script>

<style lang="scss" scoped>
.newBanner{
    height: 100%;
    .image {
    height: 100%;
    cursor: pointer;
        // img {
        //     width: 100%;
        //     height: 100%;
        //     object-fit: cover;
        // }
    }
    .imageList{
        height: 100%;
        // img {
        //     width: 100%;
        //     height: 100%;
        //     object-fit: cover;
        // }
    }
}
</style>